<template>
  <div class="header-write-input-title">
    <span>{{ $i18n('common.subject.label') }}：</span>
    <a-input
      :maxLength="SUBJECT_MAX_LENGTH"
      v-model="subject.value"
      :placeholder="defaultSubject"
      :disabled="subject.readOnly" />
  </div>
</template>

<script>
  import { useBaseInfoStore } from '@/store/modules/base-info.js';
  import { mapState } from 'pinia';
  export default {
    name: 'headerBtns',
    props: {},
    data() {
      return {
        SUBJECT_MAX_LENGTH: 85
      };
    },
    computed: {
      ...mapState(useBaseInfoStore, ['formInfo', 'defaultSubject']),
      // 标题
      subject() {
        return this.formInfo.subject;
      }
    },
    methods: {}
  };
</script>

<style lang="scss" scoped>
  .header-write-input-title {
    display: flex;
    align-items: center;
    input {
      box-shadow: none ;
      flex: 1;
    }
    input:hover {
      box-shadow: none;
    }
    
    > span {
      width: 64px;
      text-align: right;
      color: #333;
      font-size: 14px;
    }
  }
</style>
<style scoped>
  .header-write-input-title >>> .ant-input[disabled]:hover {
    border-color: #d9d9d9 !important;
  }
</style>
